<template>
  <div class="delivery-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <div class="header-icon">
            <van-icon name="printer-o" size="24" />
          </div>
          <div class="header-text">
            <h1>送货单管理</h1>
            <p>管理所有送货单，生成打印，跟踪发货状态</p>
          </div>
        </div>
        <div class="header-actions">
          <van-button 
            type="primary" 
            size="large"
            icon="plus"
            @click="showGenerateDialog = true"
            class="action-btn primary"
          >
            生成送货单
          </van-button>
          <van-button 
            type="success" 
            size="large"
            icon="down"
            @click="exportData"
            class="action-btn success"
          >
            导出数据
          </van-button>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-header">
        <van-icon name="search" size="18" />
        <span>搜索和筛选</span>
      </div>
      <van-form @submit="searchDeliveries" class="search-form">
        <van-row gutter="16">
          <van-col span="8">
            <van-field
              v-model="searchForm.shipment_no"
              label="送货单号"
              placeholder="请输入送货单号"
              clearable
              class="search-field"
            >
              <template #left-icon>
                <van-icon name="orders-o" size="16" />
              </template>
            </van-field>
          </van-col>
          <van-col span="8">
            <van-field
              v-model="searchForm.customer"
              label="客户名称"
              placeholder="请输入客户名称"
              clearable
              class="search-field"
            >
              <template #left-icon>
                <van-icon name="contact" size="16" />
              </template>
            </van-field>
          </van-col>
          <van-col span="8">
            <van-field
              v-model="searchForm.status"
              label="状态"
              placeholder="请选择状态"
              readonly
              @click="showStatusPicker = true"
              class="search-field"
            >
              <template #left-icon>
                <van-icon name="info-o" size="16" />
              </template>
            </van-field>
          </van-col>
        </van-row>
        <van-row gutter="16">
          <van-col span="8">
            <van-field
              v-model="searchForm.start_date"
              label="开始日期"
              type="date"
              placeholder="请选择开始日期"
              class="search-field"
            >
              <template #left-icon>
                <van-icon name="calendar-o" size="16" />
              </template>
            </van-field>
          </van-col>
          <van-col span="8">
            <van-field
              v-model="searchForm.end_date"
              label="结束日期"
              type="date"
              placeholder="请选择结束日期"
              class="search-field"
            >
              <template #left-icon>
                <van-icon name="calendar-o" size="16" />
              </template>
            </van-field>
          </van-col>
          <van-col span="8">
            <van-button 
              type="primary" 
              native-type="submit" 
              block 
              size="large"
              icon="search"
              class="search-btn"
            >
              搜索
            </van-button>
          </van-col>
        </van-row>
      </van-form>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stats-header">
        <van-icon name="chart-trending-o" size="18" />
        <span>数据统计</span>
      </div>
      <van-row gutter="16">
        <van-col span="6">
          <div class="stat-card total">
            <div class="stat-icon">
              <van-icon name="orders-o" size="24" />
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.total_deliveries || 0 }}</div>
              <div class="stat-label">总送货单数</div>
            </div>
            <div class="stat-bg"></div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="stat-card today">
            <div class="stat-icon">
              <van-icon name="clock-o" size="24" />
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.today_deliveries || 0 }}</div>
              <div class="stat-label">今日送货单</div>
            </div>
            <div class="stat-bg"></div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="stat-card pending">
            <div class="stat-icon">
              <van-icon name="pending-payment" size="24" />
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.pending_shipments || 0 }}</div>
              <div class="stat-label">待发货</div>
            </div>
            <div class="stat-bg"></div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="stat-card shipped">
            <div class="stat-icon">
              <van-icon name="logistics" size="24" />
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ stats.shipped_deliveries || 0 }}</div>
              <div class="stat-label">已发货</div>
            </div>
            <div class="stat-bg"></div>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 送货单列表 -->
    <div class="delivery-list">
      <div class="list-header">
        <van-icon name="list" size="18" />
        <span>送货单列表</span>
        <span class="list-count">共 {{ deliveries.length }} 条记录</span>
      </div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadDeliveries"
        class="delivery-list-content"
      >
        <div
          v-for="delivery in deliveries"
          :key="delivery.id"
          class="delivery-item"
          @click="viewDelivery(delivery)"
        >
          <div class="delivery-header">
            <div class="delivery-main">
              <span class="shipment-no">
                <van-icon name="orders-o" size="16" />
                {{ delivery.shipment_no }}
              </span>
              <span class="status" :class="getStatusClass(delivery.status)">
                <van-icon :name="getStatusIcon(delivery.status)" size="14" />
                {{ delivery.status }}
              </span>
            </div>
            <div class="delivery-amount">
              ¥{{ delivery.final_amount?.toFixed(2) || '0.00' }}
            </div>
          </div>
          
          <div class="delivery-content">
            <div class="customer-info">
              <div class="customer-main">
                <van-icon name="contact" size="16" />
                <strong>{{ delivery.customer }}</strong>
                <span class="phone">{{ delivery.customer_phone }}</span>
              </div>
              <div class="delivery-details">
                <div class="detail-item">
                  <van-icon name="location-o" size="14" />
                  <span>{{ delivery.delivery_address || '未设置地址' }}</span>
                </div>
                <div class="detail-item">
                  <van-icon name="calendar-o" size="14" />
                  <span>送货日期: {{ delivery.delivery_date || '未设置' }}</span>
                </div>
                <div class="detail-item">
                  <van-icon name="shop-o" size="14" />
                  <span>仓库: {{ delivery.warehouse || '未设置' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="delivery-actions">
            <van-button 
              size="small" 
              type="primary" 
              icon="printer-o"
              @click.stop="printDelivery(delivery)"
              class="action-btn print"
            >
              打印
            </van-button>
            <van-button 
              size="small" 
              type="success" 
              icon="passed"
              @click.stop="confirmOutbound(delivery)" 
              v-if="delivery.status === '待发货'"
              class="action-btn outbound"
            >
              确认出库
            </van-button>
            <van-button 
              size="small" 
              type="warning" 
              icon="logistics"
              @click.stop="confirmShipment(delivery)" 
              v-if="delivery.status === '已出库'"
              class="action-btn shipment"
            >
              确认发货
            </van-button>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 生成送货单对话框 -->
    <van-dialog 
      v-model:show="showGenerateDialog" 
      title="生成送货单" 
      @confirm="generateDelivery"
      class="generate-dialog"
    >
      <div class="dialog-header">
        <van-icon name="plus" size="20" />
        <span>填写送货单信息</span>
      </div>
      <van-form ref="generateForm" class="generate-form">
        <van-field
          v-model="generateForm.delivery_date"
          label="送货日期"
          type="date"
          required
          class="form-field"
        />
        <van-field
          v-model="generateForm.delivery_address"
          label="送货地址"
          placeholder="请输入送货地址"
          required
          class="form-field"
        />
        <van-field
          v-model="generateForm.delivery_contact"
          label="联系人"
          placeholder="请输入联系人"
          required
          class="form-field"
        />
        <van-field
          v-model="generateForm.delivery_phone"
          label="联系电话"
          placeholder="请输入联系电话"
          required
          class="form-field"
        />
        <van-field
          v-model="generateForm.warehouse"
          label="出库仓库"
          placeholder="请输入出库仓库"
          required
          class="form-field"
        />
        <van-field
          v-model="generateForm.packager"
          label="包装员"
          placeholder="请输入包装员"
          class="form-field"
        />
        <van-field
          v-model="generateForm.shipper"
          label="发货员"
          placeholder="请输入发货员"
          class="form-field"
        />
        <van-field
          v-model="generateForm.shipping_method"
          label="运输方式"
          placeholder="请输入运输方式"
          class="form-field"
        />
        <van-field
          v-model="generateForm.freight"
          label="运费"
          type="number"
          placeholder="0.00"
          class="form-field"
        />
        <van-field
          v-model="generateForm.tax_rate"
          label="税率(%)"
          type="number"
          placeholder="0.00"
          class="form-field"
        />
        <van-field
          v-model="generateForm.discount"
          label="折扣"
          type="number"
          placeholder="0.00"
          class="form-field"
        />
      </van-form>
    </van-dialog>

    <!-- 状态选择器 -->
    <van-popup v-model:show="showStatusPicker" position="bottom" class="status-popup">
      <van-picker
        :columns="statusOptions"
        @confirm="onStatusConfirm"
        @cancel="showStatusPicker = false"
        title="选择状态"
      />
    </van-popup>

    <!-- 出库确认对话框 -->
    <van-dialog 
      v-model:show="showOutboundDialog" 
      title="确认出库" 
      @confirm="submitOutbound"
      class="outbound-dialog"
    >
      <div class="dialog-header">
        <van-icon name="passed" size="20" />
        <span>确认商品出库</span>
      </div>
      <van-form class="outbound-form">
        <van-field
          v-model="outboundForm.outbound_date"
          label="出库日期"
          type="date"
          required
          class="form-field"
        />
        <van-field
          v-model="outboundForm.operator"
          label="操作员"
          placeholder="请输入操作员"
          required
          class="form-field"
        />
        <van-field
          v-model="outboundForm.notes"
          label="备注"
          type="textarea"
          placeholder="请输入备注信息"
          class="form-field"
        />
      </van-form>
    </van-dialog>

    <!-- 发货确认对话框 -->
    <van-dialog 
      v-model:show="showShipmentDialog" 
      title="确认发货" 
      @confirm="submitShipment"
      class="shipment-dialog"
    >
      <div class="dialog-header">
        <van-icon name="logistics" size="20" />
        <span>确认商品发货</span>
      </div>
      <van-form class="shipment-form">
        <van-field
          v-model="shipmentForm.ship_date"
          label="发货日期"
          type="date"
          required
          class="form-field"
        />
        <van-field
          v-model="shipmentForm.tracking_no"
          label="运单号"
          placeholder="请输入运单号"
          required
          class="form-field"
        />
        <van-field
          v-model="shipmentForm.carrier"
          label="承运商"
          placeholder="请输入承运商"
          required
          class="form-field"
        />
        <van-field
          v-model="shipmentForm.shipper"
          label="发货员"
          placeholder="请输入发货员"
          required
          class="form-field"
        />
        <van-field
          v-model="shipmentForm.notes"
          label="备注"
          type="textarea"
          placeholder="请输入备注信息"
          class="form-field"
        />
      </van-form>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { showToast, showSuccessToast, showFailToast } from 'vant'
import { deliveryApi } from '@/api/delivery'

// 响应式数据
const loading = ref(false)
const finished = ref(false)
const showGenerateDialog = ref(false)
const showStatusPicker = ref(false)
const showOutboundDialog = ref(false)
const showShipmentDialog = ref(false)

const deliveries = ref<any[]>([])
const stats = ref<any>({})
const currentDelivery = ref<any>(null)

// 搜索表单
const searchForm = reactive({
  shipment_no: '',
  customer: '',
  status: '',
  start_date: '',
  end_date: ''
})

// 生成送货单表单
const generateForm = reactive({
  delivery_date: '',
  delivery_address: '',
  delivery_contact: '',
  delivery_phone: '',
  warehouse: '',
  packager: '',
  shipper: '',
  shipping_method: '',
  freight: 0,
  tax_rate: 0,
  discount: 0
})

// 出库表单
const outboundForm = reactive({
  outbound_date: '',
  operator: '',
  notes: ''
})

// 发货表单
const shipmentForm = reactive({
  ship_date: '',
  tracking_no: '',
  carrier: '',
  shipper: '',
  notes: ''
})

// 状态选项
const statusOptions = [
  { text: '待发货', value: '待发货' },
  { text: '已出库', value: '已出库' },
  { text: '已发货', value: '已发货' },
  { text: '已完成', value: '已完成' },
  { text: '已取消', value: '已取消' }
]

// 页面加载时获取数据
onMounted(() => {
  loadStats()
  loadDeliveries()
})

// 加载统计数据
const loadStats = async () => {
  try {
    const response = await deliveryApi.getStats()
    stats.value = response.data
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 加载送货单列表
const loadDeliveries = async () => {
  try {
    loading.value = true
    const response = await deliveryApi.getList({
      ...searchForm,
      page: 1,
      pageSize: 20
    })
    
    if (response.data.items) {
      deliveries.value = response.data.items
    }
    
    finished.value = true
  } catch (error) {
    showFailToast('加载送货单列表失败')
    console.error('加载送货单列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 搜索送货单
const searchDeliveries = () => {
  finished.value = false
  deliveries.value = []
  loadDeliveries()
}

// 状态选择确认
const onStatusConfirm = (value: any) => {
  searchForm.status = value.value
  showStatusPicker.value = false
}

// 生成送货单
const generateDelivery = async () => {
  try {
    // 这里需要先选择订单，然后生成送货单
    showSuccessToast('送货单生成成功')
    showGenerateDialog.value = false
    loadDeliveries()
    loadStats()
  } catch (error) {
    showFailToast('生成送货单失败')
    console.error('生成送货单失败:', error)
  }
}

// 打印送货单
const printDelivery = async (delivery: any) => {
  try {
    const response = await deliveryApi.print(delivery.id)
    // 这里可以调用打印功能或显示打印预览
    showSuccessToast('打印数据已准备')
    console.log('打印数据:', response.data)
  } catch (error) {
    showFailToast('打印失败')
    console.error('打印失败:', error)
  }
}

// 查看送货单详情
const viewDelivery = (delivery: any) => {
  // 跳转到详情页面或显示详情弹窗
  console.log('查看送货单:', delivery)
}

// 确认出库
const confirmOutbound = (delivery: any) => {
  currentDelivery.value = delivery
  outboundForm.outbound_date = new Date().toISOString().split('T')[0]
  showOutboundDialog.value = true
}

// 提交出库确认
const submitOutbound = async () => {
  try {
    await deliveryApi.confirmOutbound(currentDelivery.value.id, outboundForm)
    showSuccessToast('出库确认成功')
    showOutboundDialog.value = false
    loadDeliveries()
    loadStats()
  } catch (error) {
    showFailToast('出库确认失败')
    console.error('出库确认失败:', error)
  }
}

// 确认发货
const confirmShipment = (delivery: any) => {
  currentDelivery.value = delivery
  shipmentForm.ship_date = new Date().toISOString().split('T')[0]
  showShipmentDialog.value = true
}

// 提交发货确认
const submitShipment = async () => {
  try {
    await deliveryApi.confirmShipment(currentDelivery.value.id, shipmentForm)
    showSuccessToast('发货确认成功')
    showShipmentDialog.value = false
    loadDeliveries()
    loadStats()
  } catch (error) {
    showFailToast('发货确认失败')
    console.error('发货确认失败:', error)
  }
}

// 导出数据
const exportData = async () => {
  try {
    const response = await deliveryApi.export(searchForm)
    // 处理CSV下载
    const blob = new Blob([response.data], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = `deliveries_${new Date().toISOString().split('T')[0]}.csv`
    link.click()
    showSuccessToast('数据导出成功')
  } catch (error) {
    showFailToast('数据导出失败')
    console.error('数据导出失败:', error)
  }
}

// 获取状态样式类
const getStatusClass = (status: string) => {
  const statusMap: Record<string, string> = {
    '待发货': 'status-pending',
    '已出库': 'status-outbound',
    '已发货': 'status-shipped',
    '已完成': 'status-completed',
    '已取消': 'status-cancelled'
  }
  return statusMap[status] || 'status-default'
}

// 获取状态图标
const getStatusIcon = (status: string) => {
  const iconMap: Record<string, string> = {
    '待发货': 'pending-payment',
    '已出库': 'passed',
    '已发货': 'logistics',
    '已完成': 'checked',
    '已取消': 'close'
  }
  return iconMap[status] || 'info-o'
}
</script>

<style scoped>
.delivery-page {
  padding: 16px;
  background-color: #f5f5f5; /* 添加背景色 */
  min-height: 100vh; /* 确保页面有足够高度 */
}

.page-header {
  background: linear-gradient(to right, #4facfe, #00f2fe); /* 渐变背景 */
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* 卡片阴影 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-text h1 {
  margin: 0;
  font-size: 28px;
  font-weight: bold;
}

.header-text p {
  font-size: 14px;
  margin-top: 4px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  border-radius: 8px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-btn.primary {
  background-color: #6c5ce7;
  border-color: #6c5ce7;
}

.action-btn.success {
  background-color: #4caf50;
  border-color: #4caf50;
}

.search-section {
  background: white;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #333;
}

.search-header span {
  font-size: 16px;
  font-weight: bold;
}

.search-form .van-field {
  margin-bottom: 12px;
}

.search-form .van-field__label {
  color: #666;
  font-size: 14px;
}

.search-form .van-field__value {
  color: #333;
  font-size: 16px;
}

.search-form .van-field__left-icon {
  margin-right: 8px;
}

.search-btn {
  background-color: #6c5ce7;
  border-color: #6c5ce7;
}

.stats-section {
  margin-bottom: 24px;
}

.stats-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #333;
}

.stats-header span {
  font-size: 16px;
  font-weight: bold;
}

.stat-card {
  background: white;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 卡片阴影 */
  position: relative;
  overflow: hidden;
}

.stat-card .stat-icon {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.stat-card .stat-content {
  position: relative;
  z-index: 1;
}

.stat-card .stat-number {
  font-size: 28px;
  font-weight: bold;
  color: white;
  margin-bottom: 8px;
}

.stat-card .stat-label {
  color: white;
  font-size: 14px;
  opacity: 0.9;
}

.stat-card .stat-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  z-index: 0;
  border-radius: 12px;
}

.stat-card.total {
  background: linear-gradient(to right, #4facfe, #00f2fe);
}

.stat-card.today {
  background: linear-gradient(to right, #43e97b, #38f9d7);
}

.stat-card.pending {
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
}

.stat-card.shipped {
  background: linear-gradient(to right, #6a11cb, #2575fc);
}

.delivery-list {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.list-header span {
  font-size: 16px;
  font-weight: bold;
}

.list-count {
  font-size: 14px;
  color: #666;
  margin-left: auto;
}

.delivery-list-content .van-list__finished-text {
  color: #666;
  font-size: 14px;
}

.delivery-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  flex-direction: column;
}

.delivery-item:hover {
  background-color: #f8f9fa;
}

.delivery-item:last-child {
  border-bottom: none;
}

.delivery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.delivery-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shipment-no {
  font-weight: bold;
  color: #333;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: white;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-pending { background-color: #ff9500; }
.status-outbound { background-color: #007aff; }
.status-shipped { background-color: #34c759; }
.status-completed { background-color: #5856d6; }
.status-cancelled { background-color: #ff3b30; }
.status-default { background-color: #8e8e93; }

.delivery-amount {
  font-size: 18px;
  font-weight: bold;
  color: #667eea;
  text-align: right;
}

.delivery-content {
  margin-bottom: 12px;
}

.customer-info {
  margin-bottom: 12px;
}

.customer-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.customer-main .van-icon {
  color: #667eea;
}

.customer-main strong {
  color: #333;
  font-size: 16px;
}

.phone {
  color: #666;
  font-size: 14px;
}

.delivery-details {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.delivery-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.action-btn {
  border-radius: 6px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
}

.action-btn.print {
  background-color: #6c5ce7;
  border-color: #6c5ce7;
}

.action-btn.outbound {
  background-color: #4caf50;
  border-color: #4caf50;
}

.action-btn.shipment {
  background-color: #ff9500;
  border-color: #ff9500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
  }
  
  .header-actions {
    width: 100%;
    flex-direction: column;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }

  .search-section {
    padding: 12px;
  }

  .search-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .search-header span {
    font-size: 14px;
  }

  .search-form .van-row {
    flex-direction: column;
    gap: 12px;
  }

  .search-form .van-col {
    width: 100%;
  }

  .search-form .van-field {
    margin-bottom: 0;
  }

  .search-form .van-field__label {
    font-size: 13px;
  }

  .search-form .van-field__value {
    font-size: 15px;
  }

  .search-form .van-field__left-icon {
    margin-right: 0;
  }

  .search-btn {
    font-size: 14px;
  }

  .stats-section {
    padding: 12px;
  }

  .stats-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .stats-header span {
    font-size: 14px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-card .stat-number {
    font-size: 22px;
  }

  .stat-card .stat-label {
    font-size: 12px;
  }

  .stat-card .stat-bg {
    border-radius: 8px;
  }

  .delivery-item {
    padding: 12px;
  }

  .delivery-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .shipment-no {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .status {
    padding: 4px 10px;
    font-size: 12px;
  }

  .delivery-amount {
    font-size: 16px;
    text-align: left;
  }

  .delivery-content {
    margin-bottom: 0;
  }

  .customer-info {
    margin-bottom: 0;
  }

  .customer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .customer-main .van-icon {
    color: #667eea;
  }

  .customer-main strong {
    font-size: 15px;
  }

  .phone {
    font-size: 13px;
  }

  .delivery-details {
    flex-direction: column;
    gap: 4px;
  }

  .detail-item {
    font-size: 13px;
  }

  .delivery-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
  }

  .action-btn {
    font-size: 13px;
    padding: 6px 10px;
  }
 }
</style>